<template>
  <div>
    <div class="videobox">
      <v-video :options="options"></v-video>
    </div>
    <el-form
      ref="form"
      :rules="formRules"
      :model="form"
      label-width="120px"
      size="small"
    >

      <div class="dis30"></div>
      <el-form-item label="标签:" prop="name">
        <!--<v-inputtag style="width: 500px;"></v-inputtag>-->
        <el-tag
          :key="index"
          v-for="(tag,index) in form.name"
          closable
          type="success"
          :disable-transitions="false"
          @close="deleteName(index)">
          {{tag.tag_name}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          style="margin: 0 0 10px 10px;"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>

      </el-form-item>
      <el-form-item label="可选标签">
        <el-tag
          :key="index"
          class="pointer"
          :type="form.name.findIndex((el) => { return el.tag_name == tag.tag_name}) != -1 ? 'info' : ''"
          @click="chooseTag(tag,index)"
          v-for="(tag,index) in resourcesTag">
          {{tag.tag_name}}
        </el-tag>
        <el-button size="small" @click="pageUp">换一换</el-button>
      </el-form-item>
      <el-form-item label="备注:">
        <el-input placeholder="请输入内容" v-model="form.bz" class="w300"></el-input>
        <el-button size="small" @click="saveEdit">保存</el-button>
      </el-form-item>
      <div class="dis10"></div>
      <div class="tr">
        <div class="dis30"></div>
        <!--<el-form-item label>-->
          <!--<el-button @click.stop="save" size="big" type="primary">保存</el-button>-->
          <!--<el-button @click.stop="cancelSubmit" size="big">取消</el-button>-->
        <!--</el-form-item>-->
        <div class="dis20"></div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ["rid"],
  data() {
    return {
      emptyNode: '请选择节点',
      emptyHost: '请选择设备',
      keyword: "",
      imgsrc: "",
      nodeId: 0,
      hostId: 0,
      hostName: "",
      hostTitle: "",
      resourcesTag: {},
      page: 1,
      totalPage: 0,
      form: {
        id: 0,
        name: [],
        client_id: 0,
        client_name: "",
        bz: "",
        group:0
      },
      inputValue: '',
      inputVisible: false,
      formRules: {
//        name: [{ required: true, message: "未填写图形名称", trigger: "blur" }]
      },
      data: {rid: 0},
      options: {autoplay: false, sources: []},
      autoHostParams: { node_id: 0, keyword: "" },
      paramsList: {
        orderby: "name|asc",
        node_id: 0,
        host_id: "0",
        keyword: ""
      }
    };
  },
  mounted() {
    this.getRow();
  },
  watch: {
    rid (val, oldVal) {
      this.getRow()
    }
  },
  methods: {
    initForm () {
      this.form.id = this.data.id || 0
      this.form.name = this.data.tags || []
      this.form.client_id = this.data.client_id || 0
      this.form.client_name = this.data.client_name || ''
      this.form.bz = this.data.bz || ''
    },
    getRow () {
      this.$api
        .get("resources.get_detail", { rid: this.rid })
        .then(res => {
          this.data = res.data
          this.initForm();
          this.options.ratio = this.data.ratio
          this.options.autoplay = false
          this.options.src = this.data.src
          this.options.type = this.data.mime_type
          this.options.poster = this.data.poster
          this.options.sources = []
          this.options.sources.push({
            //poster: this.data.poster,
            name: '480P',
            code: '480p',
            src: this.data.src
          })
          this.options.sources.push({
            //poster: this.data.poster,
            name: '720P',
            code: '720p',
            src: this.data.src
          })
          this.options.sources.push({
            //poster: this.data.poster,
            name: '1080P',
            code: '1080P',
            src: this.data.src
          })
        });
//      this.getResourcesTag()
      this.getTags()
    },
//    getResourcesTag() {
//        this.$api.get('tags.get_resources_tag', {resources_id: this.rid}).then( res => {
//          this.form.name = res.data || []
//        })
//    },
    getTags() {
        const params = {
          page: this.page,
          pagesize: 10,
          resources_id: this.rid
        }
        this.$api.get('tags.get_tags', params).then( res => {
          if(res.status === 1){
            this.resourcesTag = res.data.list
            this.totalPage = res.data.totalpage
          }else{
            this.$error(res.msg)
          }
        })
    },
    pageUp(){
        if(this.page < this.totalPage){
          this.page += 1
          this.getTags()
        }else{
            this.page = 1
            this.getTags()
        }
    },
    chooseTag(row) {
        let that = this
        if(this.form.name.findIndex((el) => { return el.tag_name == row.tag_name}) != -1){
            return
        }else{
            const params = {
              tag_name: row.tag_name,
              sort: '',
              resources_id: that.rid
            }
            that.$api.post('tags.add_resources_tag',params).then(res => {
              if(res.status === 1){
                that.getTags()
                that.form.name = res.data
              }else{
                that.$error(res.msg)
              }
            })
        }
    },
    cancelSubmit(val,key,item){  //选择分组
      this.$emit("closeDialog");
    },
    // 选择客户
    onSelClient(key, value, item) {
      let that = this;
      that.form.client_id = key;
      that.form.client_name = value;
    },
    //删除标签
    deleteName(index) {
//      this.form.name.splice(index, 1)
      const params = {
        tag_name: this.form.name[index].tag_name,
        resources_id: this.rid
      }
      this.$api.post('tags.del_resources_tag', params).then( res => {
          if(res.status === 1){
              this.form.name = res.data
              this.getTags()
          }else{
              this.$error(res.msg)
          }
      })
    },
    handleInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue) {
        const params = {
          tag_name: this.inputValue,
          sort: '',
          resources_id: this.rid
        }
        this.$api.post('tags.add_resources_tag',params).then(res => {
          if(res.status === 1){
            this.getTags()
            this.form.name = res.data
            this.inputVisible = false
            this.inputValue = ''
          }else{
            this.$error(res.msg)
          }
        })
      }else{
        this.inputVisible = false
        this.inputValue = ''
      }
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    saveEdit() {
        const params = {
          resources_id: this.rid,
          bz: this.form.bz
        }
        this.$api.post('resources.edit',params).then(res => {
            if(res.status === 1){
              this.$success(res.msg)
              this.$emit("closeDialog")
            }else{
                this.$error(res.msg)
            }
        })
    },
    // 保存
    save() {
      let that = this;
      that.$refs["form"].validate(valid => {
        //验证前面的表单是否符合要求
        if (valid) {
          let url = that.form.id ? "flow_img.update_img" : "flow_img.save_img";
          that.status = true;
          that.form.data = that.chooseList
          that.$api.post(url, that.form).then(res => {
            if (res.status === 1) {
              this.getRow()
              this.$success(res.msg)
              this.$emit("closeDialog")
            } else {
              that.$error(res.msg);
            }
            that.status = false;
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-graph-box {
}
.edit-graph-box h1 {
  font-weight: 400;
  font-size: 16px;
  height: 48px;
  line-height: 48px;
  padding: 0 0px;
  background-color: #f8f8f8;
  border-bottom: solid 1px #efefef;
}
.edit-graph-box h1 span.title {
  display: inline-block;
  color: #3860f4;
  border-bottom: solid 2px #3860f4;
  padding: 0 12px;
}
.sel-graph-box {
  background-color: #efefef;
}
.selected-box {
  width: 30%;
  float: right;
  height: 500px;
  border: solid 1px #ccc;
  background-color: #fff;
  position: relative;
}
.selected-box .select-list-box {
  background: #fff;
  position: absolute;
  bottom: 38px;
  top: 0;
  left: 0;
  right: 0px;
  overflow-y: auto;
}
.selected-box .vbtns {
  background: #fff;
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0px;
  text-align: center;
  line-height: 38px;
  height: 38px;
  border-top: solid 1px #efefef;
}
.unselect-box {
  width: 69%;
  float: left;
  height: 500px;
  border: solid 1px #efefef;
  position: relative;
  background-color: #fff;
}
.opbtn-box {
  padding-top: 120px;
  float: right;
  width: 7%;
  text-align: center;
}
.unselect-box .filter-box {
  height: 48px;
  padding: 0 24px;
  background-color: #f1f1f1;
  line-height: 48px;
}
.unselect-box .left-list {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  bottom: 0px;
  overflow-y: auto;
}
.unselect-box .right-list {
  position: absolute;
  top: 48px;
  right: 0px;
  bottom: 0px;
  width: 38%;
  border-left: solid 1px #efefef;
}
.unselect-box .right-list .preselect-box {
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 38px;
  left: 0px;
  padding: 12px;
}
.unselect-box .right-list .preselect-btns {
  text-align: center;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 38px;
  border-top: solid 1px #efefef;
  line-height: 38px;
}

.el-tag + .el-tag {
  margin: 0 0 10px 10px;
}
.button-new-tag {
  margin: 0 0 10px 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: top;
}
  .pointer{
    cursor: pointer;
  }
</style>
